<nz-card>
  <form nz-form [formGroup]="validateForm" (ngSubmit)="submitForm()">
    <nz-form-item>
      <nz-form-label [nzSpan]="4" nzRequired nzFor="title">名称</nz-form-label>
      <nz-form-control [nzSpan]="8" [nzValidateStatus]="validateForm.controls['title']">
        <input type="text" nz-input formControlName="title" placeholder="名称,建议不要超过8个字">
        <nz-form-explain *ngIf="validateForm.get('title').dirty && validateForm.get('title').hasError('required')">请输入名称</nz-form-explain>
        <nz-form-explain *ngIf="validateForm.get('title').dirty && validateForm.get('title').hasError('maxlength')">不能超过30个字</nz-form-explain>
      </nz-form-control>
      <nz-form-label [nzSpan]="4" nzRequired nzFor="price">零售/基础价(￥)</nz-form-label>
      <nz-form-control [nzSpan]="8" [nzValidateStatus]="validateForm.controls['price']">
        <nz-input-number style="width: 100%;" [nzMin]="1" [nzMax]="9000000" [nzStep]="5" [nzPrecision]="2" [nzPlaceHolder]="'零售价'" formControlName="price"></nz-input-number>
        <nz-form-explain *ngIf="validateForm.get('price').dirty && validateForm.get('price').hasError('required')">请输入零售价</nz-form-explain>
      </nz-form-control>
    </nz-form-item>
    <nz-form-item>
      <nz-form-label [nzSpan]="4" nzRequired nzFor="minQuantity">起订量</nz-form-label>
      <nz-form-control [nzSpan]="8">
        <nz-input-number style="width: 100%;" [nzMin]="1" [nzMax]="100000" [nzStep]="1" [nzPrecision]="0" [nzPlaceHolder]="'起订量'" formControlName="minQuantity"></nz-input-number>
        <nz-form-explain *ngIf="validateForm.get('minQuantity').dirty && validateForm.get('minQuantity').hasError('required')">请输入起订量</nz-form-explain>
      </nz-form-control>
    </nz-form-item>
    <nz-form-item>
      <nz-form-label [nzSpan]="4" nzRequired nzFor="restrictionNum">限购数量</nz-form-label>
      <nz-form-control [nzSpan]="8">
        <nz-input-number style="width: 100%;" [nzMin]="0" [nzMax]="100000" [nzStep]="1" [nzPrecision]="0" [nzPlaceHolder]="'限购数量'" formControlName="restrictionNum"></nz-input-number>
        <nz-form-extra style="color: orange;">说明：0为不限制</nz-form-extra>
        <nz-form-explain *ngIf="validateForm.get('restrictionNum').dirty && validateForm.get('restrictionNum').hasError('required')">请输入限购数量</nz-form-explain>
      </nz-form-control>
      <nz-form-label [nzSpan]="4" nzRequired nzFor="stock">库存</nz-form-label>
      <nz-form-control [nzSpan]="8" [nzValidateStatus]="validateForm.controls['stock']">
        <nz-input-number style="width: 100%;" [nzMin]="1" [nzMax]="9000000" [nzStep]="5" [nzPrecision]="0" [nzPlaceHolder]="'库存'" formControlName="stock"></nz-input-number>
        <nz-form-explain *ngIf="validateForm.get('stock').dirty && validateForm.get('stock').hasError('required')">库存</nz-form-explain>
      </nz-form-control>
    </nz-form-item>
    <nz-form-item>
      <nz-form-label [nzSpan]="4" nzRequired nzFor="unit">产品单位</nz-form-label>
      <nz-form-control [nzSpan]="8" [nzValidateStatus]="validateForm.controls['unit']">
        <input type="text" nz-input formControlName="unit" placeholder="产品单位,如 盒、个、箱 等">
        <nz-form-explain *ngIf="validateForm.get('unit').dirty && validateForm.get('unit').hasError('required')">请输入产品单位</nz-form-explain>
        <nz-form-explain *ngIf="validateForm.get('unit').dirty && validateForm.get('unit').hasError('maxlength')">不能超过6个字</nz-form-explain>
      </nz-form-control>
      <nz-form-label [nzSpan]="4" nzRequired nzFor="sortNum">排序号</nz-form-label>
      <nz-form-control [nzSpan]="8">
        <nz-input-number style="width: 100%;" [nzMin]="1" [nzMax]="10000" [nzStep]="1" [nzPlaceHolder]="'排序号'" formControlName="sortNum"></nz-input-number>
        <nz-form-explain *ngIf="validateForm.get('sortNum').dirty && validateForm.get('sortNum').hasError('required')">请输入排序号</nz-form-explain>
      </nz-form-control>
    </nz-form-item>
    <nz-form-item>
      <nz-form-label [nzSpan]="4" nzFor="miniFlag">是否开通云仓账号</nz-form-label>
      <nz-form-control [nzSpan]="3" [nzValidateStatus]="validateForm.controls['miniFlag']">
        <nz-radio-group formControlName="miniFlag">
          <label nz-radio [nzValue]="1">是</label>
          <label nz-radio [nzValue]="2">否</label>
        </nz-radio-group>
        <nz-form-explain *ngIf="validateForm.get('miniFlag').dirty && validateForm.get('miniFlag').hasError('required')">请选择是否开通云仓账号</nz-form-explain>
      </nz-form-control>
      <nz-form-label [nzSpan]="5"  *ngIf="validateForm.value.miniFlag != 1"></nz-form-label><!--占位-->
      <ng-container  *ngIf="validateForm.value.miniFlag == 1">
      <nz-form-label [nzSpan]="2" nzFor="rechargeType">充值云仓账户类型</nz-form-label>
      <nz-form-control [nzSpan]="3" [nzValidateStatus]="validateForm.controls['rechargeType']">
        <nz-radio-group formControlName="rechargeType">
          <label nz-radio [nzValue]="1">普通账户</label>
          <label nz-radio [nzValue]="2">零售账户</label>
        </nz-radio-group>
        <nz-form-extra style="color: orange;">此即用户购买此商品充值金额将充值到云仓的资金账户类型</nz-form-extra>
        <nz-form-explain *ngIf="validateForm.get('rechargeType').dirty && validateForm.get('rechargeType').hasError('required')">请选择充值账户类别</nz-form-explain>
      </nz-form-control>
      </ng-container>
      <nz-form-label [nzSpan]="4" nzRequired nzFor="mainImg">产品主图</nz-form-label>
      <nz-form-control [nzSpan]="4" [nzValidateStatus]="validateForm.controls['mainImg']">
        <input type="text" nz-input formControlName="mainImg" placeholder="产品主图" style="display: none;">
        <nz-upload class="upload-list-inline"
                   [nzMultiple]="true"
                   [nzAction]="uploadDomain"
                   [nzHeaders]="headers"
                   (nzChange)="handleChange($event)"
                   [nzSize]="2048"
                   nzAccept=".jpg,.jpeg,.png,.gif"
                   nzListType="picture-card"
                   [nzShowUploadList]="false">
          <ng-container *ngIf="!entity.mainImg">
            <i class="anticon anticon-plus"></i>
            <div class="ant-upload-text">上传产品主图</div>
          </ng-container>
          <img *ngIf="entity.mainImg" [src]="entity.mainImg|qCloudDomain" title="点击可修改主图" class="avatar">
        </nz-upload>
        <nz-form-explain *ngIf="validateForm.get('mainImg').dirty && validateForm.get('mainImg').hasError('required')">
          请选择产品主图
        </nz-form-explain>
      </nz-form-control>
      <nz-form-extra style="color: orange;">请上传小于2MB的图片<br> 且为了最佳移动端视觉效果，我们建议您添加大小约750*492的图片</nz-form-extra>
    </nz-form-item>
    <ng-container *ngIf="validateForm.value.miniFlag == 1">
      <nz-form-item>
        <nz-form-label [nzSpan]="4" nzFor="levelId">开通云仓账号级别</nz-form-label>
        <nz-form-control [nzSpan]="8">
          <nz-select formControlName="levelId" [nzPlaceHolder]="'云仓渠道级别'" [nzAllowClear]="true">
            <nz-option
              *ngFor="let option of levelOptions"
              [nzLabel]="option.name"
              [nzValue]="option.id">
            </nz-option>
          </nz-select>
          <nz-form-extra style="color: orange;">当设置了关联的云仓账号级别时，用户在星创小程序成功下单后将开通相应账号</nz-form-extra>
          <nz-form-explain *ngIf="validateForm.get('levelId').dirty && validateForm.get('levelId').hasError('required')">请选择云仓账号级别</nz-form-explain>
        </nz-form-control>
        <nz-form-label [nzSpan]="4" nzFor="rechargeNum">下单云仓充值金额(￥)</nz-form-label>
        <nz-form-control [nzSpan]="8">
          <nz-input-number style="width: 100%;" [nzMin]="0" [nzMax]="9000000" [nzStep]="5" [nzPrecision]="2" [nzPlaceHolder]="'下单云仓充值金额'" formControlName="rechargeNum"></nz-input-number>
          <nz-form-extra style="color: orange;">当设置了关联的云仓账号级别，用户在星创小程序成功下单后将为其对应云仓账号充值<br/>
            <span style="color: red;">请注意，不填，默认充值金额为该产品零售价</span></nz-form-extra>
          <nz-form-explain *ngIf="validateForm.get('rechargeNum').dirty && validateForm.get('rechargeNum').hasError('required')">请输入下单云仓充值金额</nz-form-explain>
        </nz-form-control>
      </nz-form-item>
    </ng-container>

    <nz-form-item>
      <nz-form-label [nzSpan]="4" nzFor="onlyWxpay">只允许微信支付</nz-form-label>
      <nz-form-control [nzSpan]="8" [nzValidateStatus]="validateForm.controls['onlyWxpay']">
        <nz-radio-group formControlName="onlyWxpay">
          <label nz-radio [nzValue]="1">是</label>
          <label nz-radio [nzValue]="2">否</label>
        </nz-radio-group>
        <nz-form-explain *ngIf="validateForm.get('onlyWxpay').dirty && validateForm.get('onlyWxpay').hasError('required')">请选择只允许微信支付</nz-form-explain>
      </nz-form-control>
      <nz-form-label [nzSpan]="4" nzFor="needMarkup">是否自由加价</nz-form-label>
      <nz-form-control [nzSpan]="8" [nzValidateStatus]="validateForm.controls['needMarkup']">
        <nz-radio-group formControlName="needMarkup">
          <label nz-radio [nzValue]="1">是</label>
          <label nz-radio [nzValue]="2">否</label>
        </nz-radio-group>
        <nz-form-explain *ngIf="validateForm.get('needMarkup').dirty && validateForm.get('needMarkup').hasError('required')">请选择是否自由加价</nz-form-explain>
      </nz-form-control>

    </nz-form-item>
    <nz-form-item>
      <nz-form-label [nzSpan]="4" nzFor="needAddress">是否启用地址</nz-form-label>
      <nz-form-control [nzSpan]="8" [nzValidateStatus]="validateForm.controls['needAddress']">
        <nz-radio-group formControlName="needAddress">
          <label nz-radio [nzValue]="1">是</label>
          <label nz-radio [nzValue]="2">否</label>
        </nz-radio-group>
        <nz-form-explain *ngIf="validateForm.get('needAddress').dirty && validateForm.get('needAddress').hasError('required')">请选择是否启用地址</nz-form-explain>
      </nz-form-control>
      <nz-form-label [nzSpan]="4" nzFor="needRemark">是否显示备注</nz-form-label>
      <nz-form-control [nzSpan]="8" [nzValidateStatus]="validateForm.controls['needRemark']">
        <nz-radio-group formControlName="needRemark">
          <label nz-radio [nzValue]="1">是</label>
          <label nz-radio [nzValue]="2">否</label>
        </nz-radio-group>
        <nz-form-explain *ngIf="validateForm.get('needRemark').dirty && validateForm.get('needRemark').hasError('required')">请选择是否显示备注</nz-form-explain>
      </nz-form-control>
    </nz-form-item>
    <nz-form-item>
      <nz-form-label [nzSpan]="4" nzFor="remark">
        产品简介说明
      </nz-form-label>
      <nz-form-control [nzSpan]="8" [nzValidateStatus]="validateForm.controls['remark']" class="content-class">
        <textarea rows="3" nz-input formControlName="remark" placeholder="产品简介说明" ></textarea>
        <nz-form-explain *ngIf="validateForm.get('remark').dirty && validateForm.get('remark').hasError('required')">请输入产品简介说明</nz-form-explain>
        <nz-form-explain *ngIf="validateForm.get('remark').dirty && validateForm.get('remark').hasError('maxlength')">不能超过500个字</nz-form-explain>
      </nz-form-control>
      <nz-form-label [nzSpan]="4" nzFor="description">
        产品描述
      </nz-form-label>
      <nz-form-control [nzSpan]="8" [nzValidateStatus]="validateForm.controls['description']" class="content-class">
        <textarea rows="6" nz-input formControlName="description" placeholder="产品描述" style="display: none;"></textarea>
        <div id="content-section" title="点击可进行内容编辑修改" (click)="showEdit()" style="text-align: center;display:block;height: 582px;border: 1px solid #d9d9d9;overflow-y: auto;cursor: pointer;" #content></div>
        <nz-form-explain *ngIf="validateForm.get('description').dirty && validateForm.get('description').hasError('required')">请输入产品描述</nz-form-explain>
      </nz-form-control>
    </nz-form-item>
    <div nz-form-item nz-row  style="text-align: center;border-top: 1px solid #d0d0d0; padding-top: 12px;">
      <button nz-button type="submit" [nzType]="'primary'" >保存</button>
    </div>
  </form>
  <full-screen-editor [contentVal]="entity.description" (close)="showEdit()" (contentCallback)="contentCallback($event)" *ngIf="isShow"></full-screen-editor>
</nz-card>
